<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <link rel="stylesheet" href="css/header_footer.css">
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /*主体*/
    .el-main{
      padding: 0;
    }
    /*主体1*/
    #main_1 a,#main_2 a,#main_6 a,#main_7 a{
      display: block;
      width: 133px;
      height: 34px;
      font-size: 14px;
      text-align: center;
      line-height: 34px;
      background-color: #FFFFFF;
      color: #5F5F5F;
      text-decoration: none;
      transition: 0.4s;
    }
    #main_7 a{
      font-weight: bold;
      background-color: #EC6300;
      color: #FFFFFF;
    }
    #main_2 a{
      width: 192px;
      height: 49px;
      font-weight: bold;
      line-height: 49px;
      background-color: #EC6300;
      color: #FFFFFF;
    }
    #main_1 a:hover,#main_2 a:hover,#main_6 a:hover,#main_7 a:hover{
      cursor: pointer;
      transform: scale(1.1);
      background-color: #EC6300;
      color: #FFFFFF;
    }
    #main_2 a:hover,#main_7 a:hover{
      cursor: pointer;
      transform: scale(1.0);
      background-color: #FFFFFF;
      color: #EC6300;
    }

    /*主体3*/
    .main_show_img>div>div{
      display: none;
    }
    .main_show_img>div:hover div{
      display: block;
      background-color: #EC6300;
      color: #FFFFFF;
      text-align: center;
      line-height: 311px;
      opacity: 0.8;
      font-size: 18px;
      font-weight: bold;
    }
    #main_3 a{
      display: block;
      text-decoration: none;
      font-size: 15px;
      width: 124px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: #EC6300;
      color: #FFFFFF;
      font-weight: bold;
      transition: 0.4s;
    }
    #main_3 a:hover{
      background-color: #FFFFFF;
      color: #EC6300;
      transform: scale(1.0);
    }

    /*主体8*/
    .main_8_img>div:hover {
      background-color: rgba(51,51,51,0.8);
    }
  </style>
  <script src="../../../../../../测试/js/jquery.min.js"></script>
</head>
<body>
<div id="app">

<el-container>
  <!--头部开始-->
  <el-header id="header">
    <div  style="width: 1140px;height: 100%;margin: 0 auto;">
      <!--logo开始-->
      <img src="imgs/x_header_logo.png" id="header_logo" width="180px" height="28px" style="margin: 26px 0 ">
      <!--logo结束-->

      <!--右侧导航栏开始-->
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
                mode="horizontal"
               @select="handleSelect"
               text-color="#FFFFFF"
               active-text-color="#EC6300"
               style="float: right;margin-top: 15px;background-color: #333333;" id="main_menu">
        <el-menu-item index="1"><a href="index.html">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="123.html">关于我们</a></el-menu-item>
        <el-menu-item index="3"><a href="123.html">服务项目</a></el-menu-item>
        <el-menu-item index="4"><a href="123.html">专业团队</a></el-menu-item>
        <el-menu-item index="5"><a href="123.html">学员见证</a></el-menu-item>
        <el-menu-item index="6"><a href="123.html">个人中心</a></el-menu-item>
      </el-menu>
      <!--右侧导航栏结束-->
    </div>
  </el-header>
  <!--头部结束-->

  <!--主体-->
  <el-main id="main" style="width: 100%;">
    <!--背景图片-->
      <div style="background-image: url('imgs/x_bg.png');width: 1600px;height: 1067px;position: fixed;left: 50%;margin-left: -800px"></div>

    <!--主体1-->
    <div style="width: 100%;background-color: #333333">
      <div style="height: 834px;width: 1600px;margin:0 auto;background-color: #333333;overflow: hidden;position:relative;">
        <img src="imgs/x_main_man1.png" width="780px" style="position:absolute;left: -195px;top: -35px">
        <h3 style="width: 569px;font-size: 85px;color: #FFFFFF;position: absolute;left: 240px;top: 185px">
          STEP<br>UP YOUR <br>
          <span style="color:#EC6300;">GAME.</span>
          <div id="main_1"><a href="">立即预约 <-</a></div>
        </h3>
        <img src="imgs/x_main_x1.png" width="670px" style="position: absolute;right: 50px;top: 90px">
      </div>
    </div>

    <!--主体2-->
    <div style="width: 100%;background-color: #1B1A1A">
      <div style="height: 834px;width: 1600px;margin:0 auto;background-color: #1B1A1A;position:relative;">
        <img src="imgs/x_main_x2.png" width="670px" style="position: absolute;right: 140px;top: 90px">
        <img src="imgs/x_main_man2.png" width="600px" style="position:absolute;left: 850px;top: 35px;">
        <div style="width: 392px;font-size: 15px;color: #FFFFFF;position: absolute;left: 280px;top: 185px">
          <p style="margin-bottom:15px;font-size: 24px;color: #EC6300"><b>GET PREPARED</b></p>
          <p style="font-size: 36px;margin-bottom: 15px"><b>STEPX FITNESS 健身房</b></p>
          <p style="font-size: 28px;margin-bottom: 15px"><b>體態改造代表性健身品牌</b></p>
          <p style="margin-bottom: 15px">過去的三年，Peeta Fitness 健身工作室已協助了 1000 位以上學生改善體態、找回自信。</p>
          <p style="margin-bottom: 40px">今年該品牌以全新形象出發，給予健身者和想改變體態的您，最全方位的服務。STEPX 健身房可以提供學員最客製化的體態雕塑，透過健身 + 飲食的協助與搭配，讓每位學生改善自己的體態、達到自己理想的身材。</p>
          <div id="main_2"><a href="">DISCOVE RMORE >></a></div>
        </div>
      </div>
    </div>

    <!--主体3-->
    <div style="width: 100%;background-color: #333333;position: relative;">
      <div style="height: 576px;width: 1140px;margin:0 auto;padding-top: 133px;">
        <!--文字-->
        <div style="width: 360px;margin-right: 20px;float: left;font-size: 18px;color: #FFFFFF;">
          <p style="margin-bottom:15px;font-size: 36px;color: #EC6300"><b>学员成效</b></p>
          <p style="margin-bottom: 15px">透過健身 + 飲食的協助與搭配</p>
          <p style="margin-bottom: 40px">達到事半功倍的效果</p>
          <div id="main_3" style="font-size: 15px"><a href="">了解更多 >></a></div>
        </div>
        <!--图片展示-->
        <div class="main_show_img" style="width: 180px;margin-right: 10px;float: left;">
          <div style="width: 180px;height: 311px;background-image: url('imgs/x_main_show3_1.png');background-size: 140% 100%;background-position: 35% 100%">
            <div>廖小姐</div>
          </div>
        </div>
        <div class="main_show_img" style="width: 180px;margin-right: 10px;float: left;">
          <div style="width: 180px;height: 311px;background-image: url('imgs/x_main_show3_2.png');background-size: 140% 100%;background-position: 35% 100%">
            <div>陈先生</div>
          </div>
        </div>
        <div class="main_show_img" style="width: 180px;margin-right: 10px;float: left;">
          <div style="width: 180px;height: 311px;background-image: url('imgs/x_main_show3_3.png');background-size: 140% 100%;background-position: 35% 100%">
            <div>杨小姐</div>
          </div>
        </div>
        <div class="main_show_img" style="width: 180px;margin-right: 10px;float: left;">
          <div style="width: 180px;height: 311px;background-image: url('imgs/x_main_show3_4.png');background-size: 140% 100%;background-position: 35% 100%">
            <div>王先生</div>
          </div>
        </div>
      </div>
    </div>

    <!--主体4-->
    <div style="width: 100%;background-color: #333333">
      <div style="width: 1140px;height:577px;opacity: 0"></div>
    </div>

    <!--主体5-->
    <div style="width: 100%;background-color: #1B1A1A;position: relative">
      <div style="width: 1140px;height: 878px;margin: 0 auto;">
        <!--文字-->
        <div style="float: left;width: 498px;height: 332px;margin-top: 273px;color: #FFFFFF">
          <img src="imgs/x_header_logo.png" width="330px" height="50px">
          <h3 style="font-size: 28px;color: #EC6300">STEP ON YOUR GMAE</h3>
          <h3 style="font-size: 38px;margin-bottom: 15px">追求理想性能</h3>
          <h3 style="font-size: 24px;margin-bottom: 15px">最舒适的健身房</h3>
          <p style="margin-bottom: 15px;font-size: 14px">STEP X 健身房持續不斷優化自家健身品牌，促使每個在追求健康體態的學員，獲得可持續性的健身體驗。</p>
          <p style="margin-bottom: 40px;font-size: 14px">其主要目標是實現不同學員的理想體態，因此品牌提供學員一個正向且積極的健身環境，優化創始品牌 Peeta Fitness 擁有的一對一課程以及營養課程，更聘請台灣最專業的健美/健體比賽教練，滿足進階學員的需求。</p>
        </div>
        <!--图片-->
        <div style="float: right;width: 498px;height: 332px;margin-top: 273px;background-color: #EC6300">
          <img src="imgs/x_main_5.png" width="100%" height="100%" style="box-shadow: 12px 12px #EC6300">
        </div>
      </div>
    </div>

    <!--主体6-->
    <div style="width: 100%;background-color: #333333;">
      <div style="width: 1140px;height:577px;margin:0 auto; position: relative;background-color: rgba(51,51,51,0);">
        <h3 style="font-size: 85px;color: #FFFFFF;margin: 0 auto;text-align: right;padding-top: 100px">
          STEP<br>UP YOUR <br>
          <p style="color:#EC6300;">GAME.</p>
          <div id="main_6" style="float: right"><a href="">立即预约 <-</a></div>
        </h3>
      </div>
    </div>

    <!--主体7-->
    <div style="width: 100%; background-color: #1B1A1A;position: relative">
      <div style="width: 1140px;height: 878px;margin: 0 auto;position: relative">
        <!--文字-->
        <div style="width: 498px;height: 332px;position: absolute;top: 275px;left: 635px;color: #FFFFFF">
          <h3 style="font-size: 28px;color: #EC6300">SHAPE YOUR BODY</h3>
          <h3 style="font-size: 38px;margin-bottom: 15px">STEPX 健身房提供全面服務</h3>
          <h3 style="font-size: 24px;margin-bottom: 15px">透過飲食與訓練，邁向理想體態</h3>
          <p style="margin-bottom: 15px;font-size: 14px">STEPX 健身房針對不同的族群開發不同的服務，不管是一般人，產後，銀髮族，備賽選手。STEPX的私人教練與營養團隊站在學生的角度擬定客製訓練計畫，讓訓練效果事半功倍。</p>
          <p style="margin-bottom: 40px;font-size: 14px">營養師們會每日追蹤你的飲食狀況，從您的日常生活中了解您的飲食狀況，協助您一點一滴的累積。營養師們透過 8 週以上的互動讓您學習到飲食的重要性，並從中掌握選擇食物與份量的精髓，成為您在體態改造路上最得力的助手。</p>
          <div id="main_7" ><a href="">立即预约 <-</a></div>
        </div>
        <!--图片-->
        <div style="float: right;width: 498px;height: 332px;position: absolute;top: 150px;left: 10px;background-color: #EC6300">
          <img src="imgs/x_main_7_1.png" width="100%" height="100%" style="box-shadow: 12px 12px #EC6300">
        </div>
        <div style="float: right;width: 498px;height: 332px;position: absolute;top: 415px;left: 75px;background-color: #EC6300">
          <img src="imgs/x_main_7_2.png" width="100%" height="100%" style="box-shadow: 12px 12px #EC6300">
        </div>


      </div>
    </div>

    <!--主体8-->
    <div id="main_8" style="background-color: #333333;width: 100%;position: relative">
      <div style="width: 1140px;height: 1664px;margin: 0 auto;padding-top: 150px">
        <el-row gutter="10">
          <el-col span="8">
            <div class="main_8_img" style="width: 373px;height: 560px;background-image: url('imgs/x_main_8_1.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_2.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 560px;background-image: url('imgs/x_main_8_3.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
          </el-col>
          <el-col span="8">
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_4.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_5.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_6.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_7.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_8.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
          </el-col>
          <el-col span="8">
            <div class="main_8_img" style="width: 373px;height: 560px;background-image: url('imgs/x_main_8_9.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 249px;background-image: url('imgs/x_main_8_10.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
            <div class="main_8_img" style="width: 373px;height: 560px;background-image: url('imgs/x_main_8_11.png');background-size: 100% 100%;margin-bottom: 10px">
              <div style="width: 100%;height: 100%;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

  </el-main>

  <!--脚部开始-->
  <el-footer id="footer" style="background-color: #1B1A1A;height: 620px;width: 100%;position:relative;">
    <div>
      <!--详情部分开始-->
      <div id="footer_info" >
        <img src="imgs/x_header_logo.png" style="margin-bottom: 20px;width: 200px;height: 31px;">
        <p style="margin-bottom: 40px">STEPX 健身房提供專業的私人教練課程、營養課程、備賽課程，且擁有最客製化的體態雕塑服務，透過重訓 + 飲食的協助與搭配，讓每位學生改善自己的體態、達到自己理想的身材。</p>
        <p >地址：台北市中山區南京東路二段8號B1</p>
        <p >電話：02-2567-0249</p>
        <i class="el-icon-camera-solid"><a href=""></a></i>
        <i class="el-icon-phone-outline"><a href=""></a></i>
        <i class="el-icon-location-information"><a href=""></a></i>
      </div>
      <!--详情部分结束-->

      <!--网站导览开始-->
      <div class="footer_menu" >
        <h3>网站导览</h3>
        <el-menu :default-active="activeIndex1"
                 class="el-menu-demo"
                 @select="handleSelect"
                 background-color="#1B1A1A"
                 text-color="#FFFFFF"
                 active-text-color="#EC6300"
                 style="background-color: #1B1A1A;">
          <el-menu-item index="1"><a href="index.html">首页</a></el-menu-item>
          <el-menu-item index="2"><a href="123.html">关于我们</a></el-menu-item>
          <el-menu-item index="3"><a href="123.html">服务项目</a></el-menu-item>
          <el-menu-item index="4"><a href="123.html">专业团队</a></el-menu-item>
          <el-menu-item index="5"><a href="123.html">学员见证</a></el-menu-item>
          <el-menu-item index="6"><a href="123.html">个人中心</a></el-menu-item>
        </el-menu>
      </div>
      <!--网站导览结束-->

      <!--服务项目开始-->
      <div class="footer_menu" style="left: 990px">
        <h3>服务项目</h3>
        <el-menu class="el-menu-demo"
                 background-color="#1B1A1A"
                 text-color="#FFFFFF"
                 active-text-color="#EC6300"
                 style="background-color: #1B1A1A;">
          <el-menu-item index="1"><a href="index.html">私人教练</a></el-menu-item>
          <el-menu-item index="2"><a href="123.html">比赛项目</a></el-menu-item>
        </el-menu>
      </div>
      <!--服务项目结束-->

      <!--收尾-->
      <div id="footer_last">
        <hr >
        <p style="padding-top: 40px">STEPX FITNESS 版權所有 © 2022 All Rights Reserved</p>
      </div>
      <!--收尾结束-->
    </div>
  </el-footer>
  <!--脚部结束-->
</el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--导入jquery.min.js-->
<script src="js/jquery.min.js"></script>
<script>



  function scroll() {
    var header = document.querySelector('#header');
    var menu = document.querySelector('#main_menu');
    var top = $("#main").offset().top;
    var scrollTop = $(window).scrollTop();
    if (scrollTop > top) {
      header.style.backgroundColor = 'rgba(10,10,10,0.1)';
      menu.style.backgroundColor = 'rgba(10,10,10,0)';
    } else {
      header.style.backgroundColor = 'transparent';
      menu.style.backgroundColor = 'transparent';
    }
  }
  $(window).on('scroll', function() {
    scroll()
  });

    let v = new Vue({
        el: '#app',
        data: function() {
            return {
              activeIndex:'1',
              activeIndex1:'1',
            }
        },
        methods:{
          handleSelect(key,keyPath){
            //key就是导航菜单项的index的值
            if (key=='1'){
              location.href="123.html";
            }else if(key=='2'){
              location.href="123.html";
            }else if(key=='3'){
              location.href="123.html";
            }else if(key=='4'){
              location.href="123.html";
            }else if(key=='5'){
              location.href="123.html";
            }else{
              location.href="123.html";
            }
          },



        }
    })
</script>
</html>